<template>
  <div class="my-page">
    <div class="user-info-card">
      <div class="avatar-placeholder">
        <!-- 这里可以放置用户头像，目前用首字母代替 -->
        <img src="@/assets/img/author.png" alt="" />
      </div>

      <div class="user-details">
        <h3 class="username">{{ userName }}</h3>
        <p class="phone-number">{{ userMobile || '-' }}</p>
      </div>
    </div>
    <div class="user-actions">
      <div class="action-btn" @click="switchTenant">
        <span
          ><img src="@/assets/img/zh.png" alt="" srcset="" />{{
            $t('切换租户')
          }}</span
        >
        <van-icon name="arrow" />
      </div>
      <div class="action-btn" @click="onLogOut">
        <span
          ><img src="@/assets/img/tc.png" alt="" srcset="" />{{
            $t('退出登录')
          }}</span
        >
        <van-icon name="arrow" />
      </div>
    </div>

    <TabBar />
    <CustomActionSheet
      ref="customActionSheet"
      :modelValue="showActionSheet"
      :showFooter="false"
      :title="$t('_#_切换企业_#_')"
    >
      <template #content>
        <div class="action-sheet-header">
          <p>{{ $t('当前登录企业：') }}{{ tenantName }}</p>
        </div>
        <div class="temp-scroll">
          <van-radio-group v-model="tempChecked" @change="onChangeTen">
            <div class="check-box">
              <van-radio
                :name="item.tenantId"
                v-for="(item, i) in tenantList"
                :key="i"
              >
                <div class="check-box-r">
                  <p>{{ item.tenantName }}</p>
                </div>
              </van-radio>
            </div>
          </van-radio-group>
        </div>
      </template>
    </CustomActionSheet>
  </div>
</template>
<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
import globalService from '@/services/globalService'
import { Toast } from 'vant'
import TabBar from '@/components/TabBar.vue'
import CustomActionSheet from '@/components/CustomActionSheet.vue'

export default {
  components: { TabBar, CustomActionSheet },
  data() {
    return {
      tempChecked: '',
      tenantList: [],
      showActionSheet: false,
      userName: localStorage.getItem('userName'),
      userMobile: localStorage.getItem('userMobile'),
      userCode: localStorage.getItem('userCode'),
      tenantName: localStorage.getItem('tenantName'),
    }
  },
  computed: {
    ...mapGetters(['lang']),
    languageOptions() {
      return [
        { text: this.$t('简体中文'), value: 'zh-CN' },
        { text: 'English', value: 'en-US' },
      ]
    },
    currentLanguage() {
      return this.languageOptions.find((c) => c.value === this.lang)?.text
    },
  },
  methods: {
    ...mapMutations('user', ['SET_TOKEN']),
    ...mapActions('user', ['logout']),
    switchTenant() {
      globalService.tenantListForSwitch().then((res) => {
        console.log('[ res ]-88', res)
        this.tenantList = res.data
      })
      this.showActionSheet = true
    },
    onChangeTen(v) {
      globalService
        .switchTenantLogin({ tenantId: this.tempChecked })
        .then((res) => {
          Toast(res.msg)
          const data = res.data || {}
          this.SET_TOKEN(data.token)
          localStorage.setItem('tenantCode', data.tenantCode)
          localStorage.setItem('uuUserId', data.userId)
          this.$router.push('/index')
          localStorage.setItem('tenantName', data.tenantName)
          if (data.memberName) {
            localStorage.setItem('memberName', data.memberName)
          }
          this.$store.dispatch('user/getMenuList')
          // location.reload()
        })
    },
    onLogOut() {
      localStorage.clear()
      this.$router.push({ path: '/login' })
    },
  },
  created() {},
}
</script>
<style lang="scss" scoped>
.my-page {
  height: 100vh;
  /* background-image: url('~@/assets/images/bg_login.png'); */
  background: 
    /* 图片部分 - 替换为你的实际图片URL */ url('~@/assets/img/my-bg.png')
      no-repeat top center / 100% 30%,
    /* 渐变色部分 */
      linear-gradient(181deg, #ffffff 0%, #f0f4f6 65%, #f0f4f6 100%);
  /* 确保渐变覆盖下半部分 */
  background-size: 100% 40%, 100% 100%;
  /* 图片和渐变之间无间隙 */
  background-position: top, bottom;
  /* background-size: cover; */
}

.action-sheet-header {
  p {
    font-size: 14px;
    text-align: center;
  }
}
.check-box-r {
  font-size: 13px;
  color: #333333;
}
.check-box {
  .van-radio {
    height: 60px;
    background: #f6f7fd;
    border-radius: 6px;
    margin: 10px 10px 0 10px;
    padding-left: 10px;
  }
}
.temp-scroll {
  height: 60vh;
  overflow-y: scroll;
  padding-bottom: 100px;
}
.user-info-container {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.user-info-card {
  display: flex;
  align-items: center;
  padding-top: 80px;
}

.avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 20px;
  img {
    width: 60px;
    height: 60px;
  }
}

.avatar-text {
  color: white;
  font-size: 36px;
  font-weight: bold;
}

.user-details {
  margin-bottom: 24px;
}

.username {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.phone-number {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border-radius: 10px;
  margin: 16px;
  padding: 10px;
}

.action-btn {
  padding: 10px 0;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
  }
}

.action-btn span {
  position: relative;
  display: flex;
  align-items: center;
}

.switch-tenant {
}

.switch-tenant:hover {
}

.logout {
  background-color: #fff0f0;
  color: #f56c6c;
}

.logout:hover {
  background-color: #ffe1e1;
}
</style>
